<template>
	<view class="page">
		<image src="/static/receiveGiftPacksBg.jpg" class="receiveGiftPacksBg"></image>
		<view class="giftPacksTitle">
			<image src="/static/receiveGiftPacksTitle2.png"></image>
		</view>
		<view class="giftPacks">
			<image src="/static/receiveGiftPacks2.png" mode="aspectFit"></image>
		</view>
		<view class="content">

			<view class="coupon">
				<view class="header"></view>
				<view class="title"><text>恭喜您获得</text></view>

				<view class="couponList">
					<view v-for="item in arrayList" class="coupon_item">
						<view class="coupon_item_left">
							<view class="couponValue">
								<text>￥</text>
								{{fenToYuan(item.couponValue)}}
							</view>
							<view class="couponName">
								<view>{{item.couponName}}</view>
								<text>{{item.expiredAt}}</text>
							</view>
						</view>
						<view class="boxBtn">立即领取</view>
						<!-- <view class="boxBtn disable" v-if="indexed == 3">已过期</view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import MyMinix from '@/utils/minix/minix.js';
	export default {
		mixins: [MyMinix],
		data() {
			return {
				arrayList: [{
						couponValue: 1000,
						couponName: '测试',
						expiredAt: '2023-10-30'
					},
					{
						couponValue: 1000,
						couponName: '测试',
						expiredAt: '2023-10-30'
					}

				]
			}
		},
		methods: {

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		// background: #ccc;
		min-height: 100vh;
		// background-image: url('/static/receiveGiftPacksBg.jpg');
		// background-size: 100% 100%;
		// background-repeat: no-repeat;
	}

	.receiveGiftPacksBg {
		position: fixed;
		top: 0;
		z-index: -1;
		width: 100%;
		height: 100vh;
	}

	.giftPacksTitle {
		position: fixed;
		top: 20rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 480rpx;
		height: 94rpx;
	}
	.giftPacks{
		position: fixed;
		top:90rpx;
		left: 50%;
		transform: translateX(-50%);
		width:450rpx;
		height:354rpx;
		
	}

	.giftPacksTitle ,.giftPacks{
		image {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.content {
		position: fixed;
		top: 430rpx;
		left: 50%;
		transform: translateX(-50%);

	}

	.header {
		position: absolute;
		z-index: -1;
		top: -22rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 645rpx;
		height: 20rpx;
		border-radius: 20rpx;
		background: #b52411;
		border: 10rpx solid #ec2f16;
	}

	.coupon {
		width: 620rpx;
		height: 700rpx;
		background: #fff;

		&List {
			.coupon_item {
				width: calc(100% - 140rpx);
				height: 115rpx;
				@include flexs(space-between, center);
				padding: 24rpx 40rpx;
				margin: 20rpx 20rpx 0;
				border-radius: 20rpx;
				background: #FF7D4F;
				color: #fff;
				position: relative;

				&:last-child {
					margin-bottom: 0;
				}

				.boxBtn {
					font-weight: 600;
					border: 2rpx solid #fff;
					border-radius: 32rpx;
					// color: #EB5B1E;
					// padding: 10rpx 26rpx;
					width: 120rpx;
					height: 50rpx;
					line-height: 50rpx;
					font-size: 22rpx;
					text-align: center;
				}

				.disable {
					color: #666;
					border-color: #666;
				}

				// &_left{
				// 	@include flexs(space-between, center);
				// 	flex-
				// }
				&::after,
				&::before {
					position: absolute;
					content: '';
					width: 20rpx;
					height: 25rpx;
					border-radius: 50%;
					top: 50%;
					transform: translateY(-50%);
				}

				&::after {
					right: -10rpx;
					background: linear-gradient(to left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
				}

				&::before {
					left: -10rpx;
					background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 100%);
				}

				&>view:first-child {

					height: 80rpx;
					// width: 200rpx;
					@include flexs(space-between, center);

					// flex-direction: column;
					// padding-left: 10rpx;

				}

				.couponValue {
					font-size: 64rpx;
					// color: #F01B1B;
					padding-right: 15rpx;
					margin-right: 15rpx;
					border-right: 2rpx solid #fff;

					text {
						font-size: 24rpx;
					}
				}

				.couponName {
					font-size: 24rpx;
					font-weight: 600;

					&>view {
						margin-bottom: 15rpx;
					}
				}




			}
		}
	}

	.title {
		padding-top: 20rpx;
		text-align: center;
		font-size: 28rpx;
		font-weight: 600;
		color: #EC2F16;

		text {
			position: relative;
			display: inline-block;

			&::after,
			&::before {
				content: '';
				width: 72rpx;
				height: 4rpx;
				border-radius: 2rpx;
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
			}

			&::before {
				background: linear-gradient(270deg, #ec2f16 0%, #d9d9d900 100%);
				left: -82rpx;
			}

			&::after {
				background: linear-gradient(90deg, #ec2f16 0%, #d9d9d900 100%);
				right: -82rpx;
			}
		}
	}
</style>